#map{ 
width:80vmin; 
height: 80vmin; 
-webkit-box-shadow: #c4c4c4 3px 3px 10px 5px;
-moz-box-shadow: #c4c4c4 3px 3px 10px 5px;
box-shadow: #c4c4c4 3px 3px 10px 5px;
border-radius: 25px 0px 25px 0px;
position:absolute;
opacity:0.9;
left:calc(50vw - 40vmin);
top:calc(50vh - 40vmin);
}

body {
	background-color:menu;
}

.my-input{
  border-radius: 10px 10px 10px 10px;
  outline:none;
  padding:4px;
  border:2px inset lightgray
}

.my-page {
  width:90%;
  max-width:1000px;
  min-height: 95vh;
  display: block;
  margin:0 auto;
  left: 50%;
  -webkit-box-shadow: #c4c4c4 3px 3px 10px 5px;
  -moz-box-shadow: #c4c4c4 3px 3px 10px 5px;
  box-shadow: #c4c4c4 3px 3px 10px 5px;
  background-color:white;
}

.hor-menu {
  padding:5px;
  padding-left:5%;
  width:584px;
  display: block;
  --margin:0 auto;
  --left: 50%;
}

.hor-menu a {
  background-color: #eee;
  color: black;
  display: block;
  padding: 12px;
  text-decoration: none;
  float:left;
  text-align:center;
  border:1px solid menu;
  height:30px;
  width: 120px;
  font-size: calc(100% - 4px);
border-radius: 25px 0px 25px 0px;
}

.hor-menu a:hover {
  background-color: #ccc;
}

.hor-menu a.active {
  background-color: #4CAF50;
  color: white;
}

.hor-menu a.onlyIcon {
  width: 30px;
}

.hor-menu-mob {
  padding:5px;
  padding-left:5%;
  --margin:0 auto;
  --width: 300px;
  display:none;
  --left: 50%;
}

.hor-menu-mob a {
  background-color: #eee;
  color: black;
  display: block;
  padding: 12px;
  text-decoration: none;
  float:left;
  text-align:center;
  border:1px solid menu;
  height:30px;
  width: 30px;
  font-size: calc(100% - 4px);
border-radius: 25px 0px 25px 0px;
}

.hor-menu-mob a:hover {
  background-color: #ccc;
}

.hor-menu-mob a.active {
  background-color: #4CAF50;
  color: white !important;
}

@media screen and (max-width: 650px) {
.hor-menu{display:none;}
.hor-menu-mob{display:block;}
}